<template>
	<view class="smart-page">
		<view class="smart-page-head">
	    <view class="smart-page-head-title">input输入控件</view>
	</view>
	<view>
		<view>可自动获取焦点</view></view>
	<view>
		<input class="smart-input" focus="true" placeholder="请输入手机号" ></view>
	<view>
	<view>右下角显示搜索</view>
	</view>
	<view>
		<input class="smart-input" confirm-type="search" placeholder="输入要搜索的内容" >
	</view>
<view>
	<view>控制最大输入长度</view>
	<view>
		<input class="smart-input" maxlength="5" confirm-type="search" placeholder="请输入内容" ></view>
	</view>
<view>
<view>密码输入</view>
    <view>
	   <input class="smart-input" password="true" confirm-type="search" placeholder="请输入内容" ></view>
	</view>
	<view>
	<view>可查看密码</view> 
	<view class="wrapper">
		<input class="smart-input":password="showPassword" placeholder="请输入密码">
		<image class="eye" src="../../../static/eye. png" @click="changePassword()"></image> </view>
	</view>
	<view>
	  <view>同步获取</view>
	  <view><input class="smart-input" @input="onKeyInput"></view> 
	  <view><text>{{inputValue}}</text></view>
	</view>
</view> 
</template>

<script>
     export default
     data(){
      return {
			showPassword:true,
			inputValue:'',
			}
		},
     methods: {
		changePassword(){
			console.log('点击.....);
			this.showPassword=!this.showPassword;
     },
     onKeyInput(event){
		console.log(event.detail.value);
		this.inputValue=event.detail.value;
		}
	}
}
</script>

<style>
	.eye{
		width: 74upx;
		height: 74upx;
	}
	.wrapper{
		display: flex;
	}
</style>